<template>
  <view>
    <van-field
        :value="names"
        :label="title"
        placeholder="请选择"
        :is-link="isLink"
        :input-align="inputAlign" 
        :required="required"
        readonly
        clickable
        @tap="openPopup"
    >
      <view slot="left-icon">
        <slot name="icon"></slot>
      </view>
    </van-field>
    <van-popup :show="visible" position="bottom" :z-index="zIndex">
      <van-area title="请选择" :area-list="areaList" :columns-num="columnsNum" :value="ids" @cancel="visible=false" @confirm="getArea" />
    </van-popup>
  </view>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
  props:{
    isLink: {
        type: Boolean,
        default: () => {return true}
    },
    required: {
      type: Boolean,
      default: () => false,
    },
    areaIds:{
      type: String,
    },
    areaNames: {
      type: String,
    },
    title:{
      type: String,
      default: () => '区域'
    },  
    inputAlign:{
      type: String,
      default: () => 'left'
    },
    columnsNum: {
      type: Number,
      default: () => 3,
    },
    zIndex: {
            type: Number,
            default: () => 100,
        },
  },
  data(){
    return{
      areaList,
      visible: false,
    }
  },
  computed:{
    ids:{
      get(){
        return this.areaIds;
      },
      set(newVal){
        this.$emit('update:areaIds', newVal);
      },     
    },
    names:{
      get(){
        return this.areaNames;
      },
      set(newVal){
        console.log(newVal);
        this.$emit('update:areaNames', newVal);
      }
    },
  },
  methods:{
    openPopup(){
      this.visible = true;
    },
    getArea(data){
      console.log(data);
      let list = data.detail.values;
      let ids = list.map(item => item.code);
      let names = list.map(item => item.name);
      console.log(ids,names);
      this.ids = ids.join(',');
      this.names = names.join('-');
      // this.$emit('update:areaIds', ids.join(','));
      // this.$emit('update:areaNames', this.areaName);
      this.$emit('confirm', list);
      this.visible = false;
    }
  }
}
</script>

<style>

</style>  